<template>
  <div class="statement-search-box">
    <div class="title-text">
      <div class="update-title">{{ title }}</div>
      <div class="update-time-box">数据每小时更新一次，上次更新时间：{{ updateTime ? updateTime.split(' ')[1] : '暂无' }}</div>
    </div>
    <StatisticsSearch :options="statisOptions" @submit="onSubmit" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from "vue";
  import StatisticsSearch from "@/components/zw/statistics-search/StatisticsSearch.vue";
  import { getTime } from "@/api/board";
  import { ElMessage } from "element-plus";
  const emit = defineEmits(["submit"]);
  const props = defineProps(["title"]);
  const updateTime: any = ref(null);
  const formData: any = ref({
    work_user_id: [],
    filter_time: [], //创建时间
  });

  const statisOptions = reactive([
    {
      label: "时间筛选",
      type: "dateFilter",
    },
    {
      label: "成员筛选",
      type: "depart",
      key: "depart",
      popperClass: "zw-hide_select_option",
      placeholder: "选择员工",
      multiple: true,
      isMember: true,
    },
  ]);

  //获取更新时间
  const getLataTime = async () => {
    const res = await getTime({ census_module: 1 });
    updateTime.value = res?.date_updated_at;
  };
  const onSubmit = (v: any) => {
    formData.value.filter_time = v.times;
    formData.value.work_user_id = v.depart;
    emit("submit", formData.value);
  };
  onMounted(() => {
    getLataTime()
  })
</script>

<style lang="scss" scoped>
  .statement-search-box {
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 15px;
    .title-text {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    .form_item_input {
      width: 180px;
    }
    :deep .content_left_item {
      .el-form-item__content {
        display: flex;
        flex: auto;

        .content_left_item_time {
          margin-left: 10px;
        }
      }
    }
    .update-title {
      font-size: 500;
      line-height: 40px;
    }
    .update-time-box {
      line-height: 40px;
      font-size: 14px;
      color: #848484;
    }
    .btn-box {
      text-align: right;
    }
  }
</style>
